import export

✒️ 2025-05-23 15:18 내용 수정

export

참고 자료 : mdn web docs JavaScript export
Javascript 모듈에서 함수, 객체, 원시 값을 내보낼 때 export를 사용하며, 다른 프로그램에서 import문으로 가져가 사용할 수 있다.
항상 strict mode로 적용되며, HTML 안에 작성한 스크립트에선 export를 사용할 수 없으므로 따로 js 파일을 생성해 사용해야 한다.
export default Object;를 사용하여 js 파일 내의 객체를 외부 파일로 보낼 수 있다.

export default Object;
export let name1, name2, ... , nameN;
export function fnName(){...};
export class className {...};
export {name1, name2, name3};

import

참고 자료 : mdn web docs JavaScript import
다른 모듈에서 내보낸 바인딩을 가져올 때 정적 import를 사용한다.
항상 strict mode로 적용되며, HTML 안에 작성한 스크립트에선 import를 사용할 수 없으므로 따로 js 파일을 생성해 사용해야 한다.
하나의 js파일에서 사용한 객체나 배열 등을 다른 js파일에서 불러와 사용할 수 있다.

import ExportName from "./jsfile.js";
import * as name from "module-name"
import {export1, export2} from "./jsfile.js";

해당 파일을 HTML에서 링크해줄 때 type=module을 작성해야 한다.

<script src="jsFile.js" type="module"></script>

import와 export를 사용한 예제

HTML

section과 div, h2 외에는 다른 내용을 작성하지 않고, css파일과 js파일만 링크해줬다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style_test.css">
</head>
<body>
    <section class="member content">
        <div class="inner">
            <h2 class="title">회원정보</h2>
            <!-- wrap 안에 div.box가 추가된다 -->
            <div class="wrap"></div>
        </div>
    </section>

    <script src="js/main_test.js" type="module"></script>
</body>
</html>

객체 js 파일

각 회원의 정보를 객체와 배열을 적절히 사용해서 작성했다.

// 회원 정보
let member =[
    {
        mName : '홍길동',
        birth : '19940108',
        major : '컴퓨터공학과',
        gender : true,
        exec : true,
        class : {
            math : 92,
            kor : 90,
            eng : 80,
            soc : 98
        },
        interest : ['자원봉사', '달리기']
    }, 
    {
        mName : '빌',
        birth : '19960721',
        major : '생명공학과',
        gender : true,
        exec : false,
        class : {
            math : 78,
            kor : 65,
            eng : 100,
            soc : 45
        },
        interest : ['노래', '낚시']
    }, 
    {
        mName : '아무개',
        birth : '20011005',
        major : '국어국문학과',
        gender : false,
        exec : false,
        class : {
            math : 85,
            kor : 90,
            eng : 67,
            soc : 80
        },
        interest : ['독서', '그림']
    }
]

// 멤버 배열을 내보낸다.
export default member;

작성 js 파일

내보낸 정보를 가져와 HTML에 내용을 작성하는 코드를 작성한다.

// member_test.js에서 member 배열을 가져온다.
import member from './member_test.js'

// 파일로부터 member를 제대로 가져왔는지 확인
console.log(`이름 : ${member[0].mName}`);

// 태그 생성
let tag = '';

for (let i = 0; i < member.length; i++) {
    // 성별이 true면 남자, false면 여자
    let gender = (member[i].gender) ? '남자' : '여자';
    // 임원이 true면 임원, false면 아님
    let exec = (member[i].exec) ? 'exec' : '';

    // HTML에 작성할 태그 생성
    tag += `<div class="box ${exec}">
                <p class="name">이름 : <span> ${member[i].mName} </span> </p>
                <p class="birth">생일 : <span> ${member[i].birth} </span> </p>
                <p class="major">전공 : <span> ${member[i].major} </span> </p>
                <p class="interest">관심사 : <span> ${member[i].interest} </span> </p>
                <p class="gender">성별 : <span> ${member[i].gender} </span> </p>
            </div>`;

    // 태그 내용을 넣어 줄 div 선택
    let member_wrap = document.querySelector('.member .wrap');
    member_wrap.innerHTML = tag;
}

CSS

*{margin:0; padding:0; box-sizing: border-box;}

.content{width: 100%; padding:120px 0;}
.inner{width: 1170px; margin: 0 auto;}
.content .title{margin:  0 0 40px; text-align: center;}
.content .wrap{display: flex; justify-content: space-between; flex-wrap: wrap;}

.member .box{
    width: 370px; margin: 0 0 30px; padding: 30px;
    border: 5px solid #eee;
    transition: 0.3s;
    border-radius: 10px;
}

.member .box p{margin: 0 0 5px;}

/* 특정 식별자가 있을 때만 가상 요소를 추가 */
.member .box.exec .name::after{content: '(임원)'; color:deeppink;}

/* 마우스가 올라가면 박스에 그림자가 생기도록 설정 */
.member .box:hover{box-shadow: 0 0 20px #ddd; border-color: transparent;}

import 1.png
import 2.png